import React from 'react';
import { connect } from 'dva';
import {Button, Card, Col, Row, Icon, Popconfirm, Spin} from 'antd';
import styles from './index.less';
import router from 'umi/router';

class CardPage extends React.Component {
    constructor() {
        super();
        this.state = {
            loading: true,
            loading2: false,
            gradeCard: []
        };
    }

    componentWillMount() {
      window.Isoption = false;
        this.findLevelCardList();
        //console.log(window.screen.availWidth)
        let cardBoxWidth=window.screen.availWidth-184-184-16-16-24-24;
        console.log(Math.floor(cardBoxWidth/252))
    }
    componentDidMount() {
      window.Isoption = true;
    }

    //查看成员
    clickViewMembers =(id, level) => {
        window.open(`/#/${window.storeId}/customer/searchlist/${id}`);
    }

    // 新建
    releaseCards =() => {
        router.replace({
            pathname: `/${window.storeId}/customer/card/add`
        })
        // window.open(`/#/${window.storeId}/customer/releaseCards`);
    }

    // 编辑
    clickEditPage =(Id) => {
        router.replace({
            pathname: `/${window.storeId}/customer/card/edit/${Id}`
        })
        // window.open(`/#/${window.storeId}/customer/editCars/${Id}`);
    }

    //复制
    clickCopyPage=(Id)=> {
        router.replace({
            pathname: `/${window.storeId}/customer/card/copy/${Id}`
        })
    //   window.open(`/#/${window.storeId}/customer/copyCars/${Id}`);
    }


    //获取等级卡
    findLevelCardList =() => {
        const { dispatch } = this.props;
        dispatch({
            type: 'gradeCard/FindLevelCardList',
            callBack: {
                success: res => {
                    if(res.Code ===0) {
                        this.setState({
                            loading: false,
                            gradeCard: res.Data?res.Data:[]
                        })
                    }
                },
                error: res => {
                    message.error(res.Msg);
                },
            }
        })
    }

    //禁用
    clickProhibit =(id, index) => {
      const { dispatch } = this.props;
      this.setState({
        loading2: true,
        loadingIndex: index
      })
      dispatch({
        type: 'gradeCard/DisabledLevelCard',
        payload: {
            id: id
        },
        callBack: {
          success: res => {
            if(res.Code===0) {
              this.findLevelCardList();
              setTimeout(() => {
                this.setState({
                  loading2: false
                })
              }, 1500)
            }
          }
        }
      })
    };

    //启用
    clickEnable =(id, index) => {
      const { dispatch } = this.props;
      this.setState({
        loading2: true,
        loadingIndex: index
      })
      dispatch({
        type: 'gradeCard/EnableLevelCard',
        payload: {
            id: id
        },
        callBack: {
          success: res => {
            if(res.Code===0) {
              this.findLevelCardList();
              setTimeout(() => {
                this.setState({
                  loading2: false
                })
              }, 1500)
            }
          }
        }
      })
    };

    render() {
        const {oemInfo} = this.props;
        const {loading, loading2, loadingIndex, gradeCard} = this.state;
        const Level = ['', '一','二','三','四','五','六','七','八','九','十',]
        const colorStyle={
            '#FF2E2E': '#FF6D6D',
            '#FF752E': '#FFA76D',
            '#FFB92E': '#FFCE6D',
            '#E6DF00': '#EBEA8C',
            '#0BD9D2': '#7EE5E2',
            '#19BE86': '#4FD9AA',
            '#2E74FF': '#6D9EFF',
            '#7274FF': '#726DFF',
            '#742EFF': '#9E6DFF',
            '#FF2E97': '#FF6DB6'
        };
        const prohibit = (
            <div >
                <p>
                <Icon type="question-circle-o" style={{ color: 'red', marginRight: '8px' }} />
                    确认禁用?
                </p>
           </div>
        );
        const enable = (
            <div >
                <p>
                <Icon type="question-circle-o" style={{ color: 'red', marginRight: '8px' }} />
                    确认启用?
                </p>
           </div>
        );
        return (
            <div className={styles.contentBox}>
                <Spin spinning={loading}>
                <div className={styles.top}>等级会员卡</div>
                <div className={styles.cardBox}>
                    {/* <div className={styles.cardItmeBlock}> */}
                    <Row gutter={16}>
                        {gradeCard &&gradeCard.map((item, index) => {
                            const leftColor = colorStyle[item.BackColor];
                            return (
                                //<div className={styles.cardItemBox} key={index}>
                                <Col span={6} key={index}>
                                    <Spin spinning={loadingIndex ===index && loading2}>
                                    <div
                                        className={styles.cardItem}
                                        style={
                                          // item.CardStatus===2 ?
                                          // {background:'#BDBDBD'}:
                                          item.BackType===2?
                                          {
                                            backgroundImage: `url(${oemInfo&&oemInfo.cdnUrl?oemInfo['cdnUrl'] + '/' + item.BackImgPath +'?x-oss-process=style/240':''})`,
                                            backgroundRepeat: 'no-repeat',
                                            backgroundSize: 'cover'
                                        }:
                                          {background: `linear-gradient(329deg, ${item.BackColor}, ${leftColor})`}}
                                    >
                                        <div>
                                          <div className={styles.oneLine}>
                                              <div>
                                                  <div className={styles.name}>{item.Name}</div>
                                                  <div className={styles.rule}>按规则发卡</div>
                                              </div>
                                              <div>
                                                  <img src="https://img.xiaokeduo.com/xkdnewyun/systemfile/store/mcard/membericon1.png" alt="" width={54} height={32}/>
                                              </div>
                                          </div>
                                          <div className={styles.midLine}>
                                              <div className={styles.imgBox}>
                                                  <div title={'包邮'}>
                                                    {item.HasRightsPostage && <img src="https://img.xiaokeduo.com/xkdnewyun/systemfile/store/mcard/membericon2.png" alt="" width={16} height={16}/>}
                                                  </div>
                                                  <div title={item.Discount + '折'}>
                                                    {item.HasRightsDiscount && <img src="https://img.xiaokeduo.com/xkdnewyun/systemfile/store/mcard/membericon3.png" alt="" width={16} height={16}/>}
                                                  </div>
                                                  <div title={item.Points +'积分'}>
                                                    {item.HasRightsPoint && <img src="https://img.xiaokeduo.com/xkdnewyun/systemfile/store/mcard/membericon4.png" alt="" width={16} height={16}/>}
                                                  </div>
                                                  <div>
                                                    {item.HasRightsCoupons && <img src="https://img.xiaokeduo.com/xkdnewyun/systemfile/store/mcard/membericon5.png" alt="" width={16} height={16}/>}
                                                  </div>
                                              </div>
                                              <div className={styles.level}>{Level[item.Level] + '级卡'}</div>
                                          </div>
                                        </div>
                                        {item.CardStatus===2 &&<div className={styles.modal}/>}

                                        <div className={styles.bottonLine}>
                                            <div className={styles.left}>
                                                <div onClick={() => this.clickViewMembers(item.Id, item.Level)}>查看成员</div>
                                                <div>
                                                    {/* {['禁用','启用'][item.CardStatus]} */}
                                                    <Popconfirm
                                                        icon={false}
                                                        title={prohibit}
                                                        onConfirm={() => this.clickProhibit(item.Id, index)}
                                                    >
                                                      <a>{item.CardStatus === 1 && '禁用'}</a>
                                                    </Popconfirm>
                                                    <Popconfirm
                                                       icon={false}
                                                       title={enable}
                                                       onConfirm={()=> this.clickEnable(item.Id, index)}
                                                    >
                                                      <a>{item.CardStatus === 2 && '启用'}</a>
                                                    </Popconfirm>
                                                </div>
                                                <div onClick={() => this.clickCopyPage(item.Id)}>复制</div>
                                                <div onClick={() => this.clickEditPage(item.Id)}>编辑</div>
                                            </div>
                                            <div>
                                                {['','使用中','已禁用'][item.CardStatus]}
                                            </div>
                                        </div>
                                    </div>
                                  </Spin>
                                </Col>
                                 //</div>

                            )
                        })}
                        {gradeCard&&gradeCard.length<10 &&
                        // <div className={styles.cardItemBox}>
                        <Col span={6}>
                            <div  className={styles.addCardItem} onClick={this.releaseCards}>
                                <Icon type="plus" />
                                <div>新建会员卡</div>
                            </div>
                        </Col>
                        //</div>
                      }
                        </Row>
                    {/* </div> */}
                </div>
                </Spin>
            </div>
        )
    }
}

export default connect(({gradeCard, global}) => ({
    oemInfo: global.oemInfo,
    gradeCard: gradeCard.levelCardList
}))(CardPage);
